@import "variables.less";
@import "utils/loading.less";
@import "dialogs/about.less";
@import "dialogs/screen-sharing.less";
@import "dialogs/update.less";
@import "pages/app.less";
@import "pages/loading-error.less";

*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

:focus {
	outline: 0 !important;
	outline-style: none;
	outline-color: transparent;
}

html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Meiryo UI', Arial, sans-serif;
	font-size: 0.875rem;
	line-height: 1rem;
	-webkit-font-smoothing: antialiased;
}

.rocket-h2 {
	margin: 18px 0;

	letter-spacing: -0.5px;
	text-transform: uppercase;

	font-size: 20px;
	font-weight: 300;
}

.rocket-h3 {
	margin: 18px 0;

	letter-spacing: -0.5px;
	text-transform: uppercase;

	font-size: 16px;
	font-weight: 300;
}

.alert {
	margin-bottom: 20px;
	padding: 15px;

	border: 1px solid rgba(0, 0, 0, 0);
	border-radius: 4px;
}

.alert-warning {
	color: #8a6d3b;
	border-color: #faebcc;
	background-color: #fcf8e3;
}

.alert-danger {
	color: #a94442;
	border-color: #ebccd1;
	background-color: #f2dede;
}

// input & form styles
input,
button,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

input:focus {
	outline: none;
	box-shadow: 0 0 0;
}

textarea,
select,
input[type='text'],
input[type='email'],
input[type='password'] {
	position: relative;

	width: 100%;
	height: 35px;
	padding: 2px 8px;

	border: 1px solid #dfdfdf;
	border-radius: 2px;
	outline: none;
	background-color: #ffffff;
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);

	line-height: normal;
}

// new layout buttons
.button {
	position: relative;

	display: inline-block;

	margin: 4px;
	padding: 9px 12px;

	cursor: pointer;
	word-spacing: 0;
	text-transform: uppercase;

	color: rgba(255, 255, 255, 0.85);
	border: none;
	border-radius: 2px;
	background-color: #1d74f5;

	font-size: 13px;
	font-weight: 500;
	line-height: 16px;

	span {
		position: relative;
		z-index: 2;
	}

	&::before {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		content: " ";
		transition: opacity 0.1s ease-out;

		opacity: 0;
		background-color: rgba(0, 0, 0, 0.1);
	}

	&:hover {
		text-decoration: none;

		color: #ffffff;

		&::before {
			opacity: 1;
		}
	}

	&.secondary {
		color: @primary-font-color;
		background-color: @tertiary-background-color;

		&::before {
			background-color: rgba(0, 0, 0, 0.045);
		}
	}

	&.delete,
	&.remove,
	&.red {
		min-width: 120px;

		background-color: #bc2031;
	}

	&.clean {
		background-color: rgba(0, 0, 0, 0.025);
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);

		font-size: 14px;

		&.primary {
			font-weight: 600;
		}
	}

	&:disabled {
		cursor: not-allowed;
		pointer-events: none;

		color: #888888;
		background-color: #dddddd;
		box-shadow: none;
	}
}
